<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000}
    #box{width: 682px;height: 560px;margin: 35px auto;background: #05C4F7;padding: 0 15px;position: relative;}
    h2{padding: 10px 0;}
    img{width: 682px;height: 457px;}
    .bt1,.bt2{width: 50px;height: 50px;border-radius: 50%;font-size: 30px;font-weight: bolder;border: none;background: rgba(239,150,0,0.3);outline: none;cursor:pointer;}
    .bt1{position: absolute;left: 45px;top: 240px;}
    .bt2{position: absolute;right: 45px;top: 240px;}
    .bt1:hover,.bt2:hover{background: rgba(239,150,0,0.8)}
    ul{width: 682px;height: 20px;position: absolute;bottom: 25px;text-align: center;line-height: 20px;}
    li{list-style: none;display: inline-block;padding: 0 5px;cursor:pointer;margin: 0 5px;position: relative;}
    li button{width: 10px;background: #E0D883;border-radius: 50%;width: 20px;height: 20px;border: none;outline: none;}
    li img{width: 110px;height: 70px;border: 5px solid #fff;position: absolute;top: -100px;left: -45px;display: none;}
    li div{width: 0;height: 0;position: absolute;;top: -20px;border: 10px solid;border-color: #fff transparent transparent transparent;display: none;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Div = document.getElementById('box');
      var Img =  Div.getElementsByTagName('img')[0];
      var Bt =  Div.getElementsByTagName('button');
      var Ul =  Div.getElementsByTagName('ul')[0];
      var Li = Ul.getElementsByTagName('li');
      var arr_img = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
      var num = 0;
      Img.src = arr_img[num];
      for (var i = 0; i < arr_img.length; i++){
        Ul.innerHTML += "<li>" + "<button></button>" +"</li>";
      };
      Bt[1].onclick = function(){
        num++;
        if(num == arr_img.length){
          num = 0;
        }
        Img.src = arr_img[num];   
      }
      Bt[0].onclick = function(){
        num--;
        if(num == -1){
          num = arr_img.length -1;
        }
        Img.src = arr_img[num]; 
      }
      for(var i = 0; i < Li.length; i++){
        Li[i].innerHTML += "<img src=" + arr_img[i] + "><div></div>";
        Li[i].index = i;
        Li[i].onclick = function(){
          num = this.index
          Img.src = arr_img[num];
        }
         Li[i].onmouseover = function(){
         this.getElementsByTagName('img')[0].style.display = 'block';
         this.getElementsByTagName('div')[0].style.display = 'block';
         }
         Li[i].onmouseout = function(){
          this.getElementsByTagName('img')[0].style.display = 'none';
          this.getElementsByTagName('div')[0].style.display = 'none';
         }
      };
    }
  </script>
</head>
<body>
 	<div id="box">
    <h2>带缩略图的图片轮换</h2>
    <img src="">
    <button class="bt1"><</button>
    <button class="bt2">></button>
    <ul></ul>
  </div>
</body>
</html>